<template>
  <el-dialog title="关联岗位" :visible="visible" @close="closeHandle" width="968px">
    <div class="p-20">
      <el-form inline v-model="form" ref="form" label-position="left" label-width="40px" size="small" class="form-inline">
        <el-form-item label="岗位" >
          <el-select v-model="form.post" filterable style="width:100%">
            <el-option label="腾讯广告商业分析经理" value="1"></el-option>
            <el-option label="腾讯广告商业分析经理2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" >
          <el-select v-model="form.department" style="width:100%">
            <el-option label="腾讯广告商业分析经理" value="1"></el-option>
            <el-option label="腾讯广告商业分析经理2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="doSearch">搜索</el-button>
      </el-form>
      <div class="mt-10 mb-20" style="border-top:1px solid #dcdcdc" v-loading="loading">
        <div class="related-empty" v-if="!data">
          <span>暂无数据</span>
        </div>
        <div v-else class="pt-10">
          <div class="related-block">
            <div class="mini-title">
              基本信息
            </div>
            <el-row :gutter="20" type="flex" align="top">
              <el-col :span="8">
                <div class="related-label">应聘部门</div>
                <div class="related-value">{{data.department}}</div>
              </el-col>
              <el-col :span="8">
                <div class="related-label">员工类型</div>
                <div class="related-value">{{data.type}}</div>
              </el-col>
              <el-col :span="8">
                <div class="related-label">职位族</div>
                <div class="related-value">{{data.positionGroup}}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" type="flex" align="top">
              <el-col :span="8">
                <div class="related-label">职位类</div>
                <div class="related-value">{{data.jobCategory}}</div>
              </el-col>
              <el-col :span="8">
                <div class="related-label">职位</div>
                <div class="related-value">{{data.post}}</div>
              </el-col>
              <el-col :span="8">
                <div class="related-label">建议职级</div>
                <div class="related-value">{{data.rank}}</div>
              </el-col>
            </el-row>
          </div>
          <div class="related-block">
            <div class="mini-title">
              岗位职责
            </div>
            <div class="related-content" v-html="data.responsibilities"></div>
          </div>
          <div class="related-block">
            <div class="mini-title">
              岗位要求
            </div>
            <div class="related-content" v-html="data.requirements"></div>
          </div>
        </div>
      </div>
      <div class="form-bottom t-right">
        <ui-button size="medium" @click="closeHandle">取消</ui-button>
        <ui-button size="medium" type="green" @click="onSave">选中</ui-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {Dialog, Form, FormItem, Button, Select, Option, Row, Col} from 'element-ui'
  export default {
    components: {
      [Dialog.name]: Dialog,
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      [Button.name]: Button,
      [Select.name]: Select,
      [Option.name]: Option,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    props: ['visible'],
    data () {
      return {
        data: null,
        form: {},
        loading: false
      }
    },
    methods: {
      closeHandle() {
        this.$emit('update:visible', false)
      },
      doSearch() {
        this.loading = true;
        setTimeout(() => {
          this.data = {
            department: '商业管理部',
            type: '正式',
            positionGroup: '市场族（MA）',
            jobCategory: '战略类－ST',
            post: '商业分析',
            rank: 'M3',
            responsibilities: '腾讯广告营销服务业务旨在为品牌及商家提供高效的营销解决方案，助力商业增长和为资源方提供更强的流量变现能力。在互联网广告领域发展逐步完善、市场头部玩家流量都面临瓶颈、品牌营销遭遇困境的现状下，我们通过外部分析市场、把握趋势，内部分析业务，与业务团队一同探索品牌营销领域、互联网广告领域的新模式及效率提升方案，为业务及腾讯打造增长引擎。 1.时刻关注互联网广告行业生态发展，对市场核心玩家的生态及广告业务进行深入剖析，包括但不仅限于业务情况、广告库存、核心变现能力等，助力业务更好进行资源规划、产品优化、售卖效率提升等。 2.作为内部咨询团队，结合外部环境及内部经营状况，为部门及各业务的策略制定提供方向指导及决策支持并推动落地 3.积极发掘新市场新机会并推动落地，为广告业务打造新增长引擎。',
            requirements: '1.3年以上相关工作经验；有大型互联网公司战略分析、互联网广告领域战略咨询、国内外咨询公司经验者优先 2.具有优秀的商业分析能力及丰富分析经验，包括问题拆解、数据建模及分析、逻辑框架组织和观点提炼的能力，有灵敏的市场嗅觉、快速学习及信息整合能力。有能够独立主导项目并为业务提供建设性指导的能力和经验。 3.对互联网富有热情，有责任感、有良好的沟通协调能力、团队合作精神及开放的心态。'
          }
          this.loading = false;
        }, 1000);
      },
      onSave() {
        
      }
    }
  }
</script>

<style lang="less">
  .form-inline .el-form-item{
    margin-right: 50px;
  }
  .form-inline .el-form-item__content{
    width: 300px;
  }
  .related-empty{
    height: 100px;
    text-align: center;
    padding: 50px;
    span {
      color: #999;
    }
  }
  .related-block{
    margin: 20px 0;
    .mini-title{
      border-left-color: #0073dd;
      margin-bottom: 10px;
    }
    .related-label{
      width: 98px;
      color: #919191;
      float: left;
    }
    .related-value {
      width: 100%;
      position: relative;
      margin-left: 98px;
      color: #5e5e5e;
    }
    .related-content{
      color: #919191;
      font-size: 14px;
      line-height: 24px;
      text-indent: 2em;
    }
  }
</style>
